<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中标通知书</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <style>
        .header {
            height: 60px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        .logo {
            font-size: 20px;
            font-weight: bold;
        }
        .user-info {
            margin-left: auto;
        }
        .sidebar {
            width: 240px;
            background-color: #f8f9fa;
            height: calc(100vh - 60px);
            border-right: 1px solid #dee2e6;
            padding: 20px 0;
        }
        .sidebar-item {
            padding: 10px 20px;
            cursor: pointer;
        }
        .sidebar-item:hover {
            background-color: #e9ecef;
        }
        .sidebar-title {
            display: flex;
            align-items: center;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .sidebar-title i {
            margin-right: 10px;
        }
        .sidebar-subtitle {
            padding-left: 30px;
            color: #6c757d;
            margin-bottom: 5px;
        }
        .main-content {
            padding: 20px;
            flex: 1;
        }
        .search-form {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .data-table {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        .btn-primary {
            background-color: #007bff;
        }
        .btn-secondary {
            background-color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">项目管理系统</div>
        <div class="user-info">
            <span class="mr-3">用户管理</span>
            <a href="#" class="text-dark">退出</a>
        </div>
    </div>
    <div class="d-flex">
        <div class="sidebar">
            <div class="sidebar-title">
                <i class="fa fa-file-text-o"></i>
                <span>项目投标</span>
                <i class="fa fa-angle-down ml-auto"></i>
            </div>
            <div class="sidebar-subtitle">获取文件</div>
            <div class="sidebar-subtitle">参与投标</div>
            <div class="sidebar-subtitle">开标结果</div>
            
            <div class="sidebar-title mt-4">
                <i class="fa fa-check-circle-o"></i>
                <span>中标</span>
                <i class="fa fa-angle-down ml-auto"></i>
            </div>
            <div class="sidebar-subtitle">中标通知书</div>
        </div>
        <div class="main-content">
            <div class="search-form">
                <div class="row">
                    <div class="col-md-5">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">项目编号：</span>
                            </div>
                            <input type="text" class="form-control" id="projectCode">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">项目编号：</span>
                            </div>
                            <input type="text" class="form-control" id="projectCode2">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-primary mr-2" id="searchBtn">查询</button>
                        <button class="btn btn-secondary" id="resetBtn">重置</button>
                    </div>
                </div>
            </div>
            <div class="data-table">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">序号</th>
                            <th scope="col">项目编号</th>
                            <th scope="col">项目名称</th>
                            <th scope="col">发送时间</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>P2023001</td>
                            <td>信息化建设项目</td>
                            <td>2023-05-15 14:30</td>
                            <td>
                                <a href="#" class="text-danger">[查看]</a>
                                <a href="#" class="text-primary">[下载通知书]</a>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>P2023002</td>
                            <td>网络安全升级项目</td>
                            <td>2023-06-20 09:45</td>
                            <td>
                                <a href="#" class="text-danger">[查看]</a>
                                <a href="#" class="text-primary">[下载通知书]</a>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5" class="text-center">暂无更多数据</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"></script>
    <script>
        $(document).ready(function() {
            // 查询按钮点击事件
            $("#searchBtn").click(function() {
                const projectCode = $("#projectCode").val();
                const projectCode2 = $("#projectCode2").val();
                // 这里添加查询逻辑
                console.log("查询参数:", projectCode, projectCode2);
                // 实际项目中这里应该调用后端API获取数据
            });

            // 重置按钮点击事件
            $("#resetBtn").click(function() {
                $("#projectCode").val("");
                $("#projectCode2").val("");
            });
        });
    </script>
</body>
</html>
